<template>
  <div class="body">
    <div class="register-box">
      <a-tabs
        v-model:activeKey="activeKey"
        style="color: rgba(255, 255, 255, 0.85); text-align: center"
      >
        <a-tab-pane key="1" tab="邮箱注册">
          <a-form
            ref="formRef"
            name="custom-validation"
            :model="formState"
            :rules="rules"
            v-bind="layout"
            @finish="handleFinish"
            @validate="handleValidate"
            @finishFailed="handleFinishFailed"
          >
            <a-form-item has-feedback name="mail" label="邮箱">
              <a-input v-model:value="formState.mail" autocomplete="off">
                <template #prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item has-feedback name="pass" label="密码">
              <a-input
                v-model:value="formState.pass"
                type="password"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item has-feedback name="checkPass" label="确认密码">
              <a-input
                v-model:value="formState.checkPass"
                type="password"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="邮箱验证码" name="mailcode">
              <a-input
                v-model:value="formState.mailcode"
                style="width: 50%"
                autocomplete="off"
              />
              <a-button style="margin-left: 10px" @click="getmailcode"
                >获取验证码</a-button
              >
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 6 }">
              <a-button type="primary" html-type="submit" @click="register"
                >注册</a-button
              >
            </a-form-item>
          </a-form>
        </a-tab-pane>
        <a-tab-pane key="2" tab="手机注册">
          <a-form
            ref="formRef2"
            name="custom-validation"
            :model="formState2"
            :rules="rules2"
            v-bind="layout"
            @finish="handleFinish"
            @validate="handleValidate"
            @finishFailed="handleFinishFailed"
          >
            <a-form-item has-feedback name="tel" label="手机号">
              <a-input v-model:value="formState2.tel" autocomplete="off">
                <template #prefix>
                  <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
                </template>
              </a-input>
            </a-form-item>
            <a-form-item has-feedback name="pass" label="密码">
              <a-input
                v-model:value="formState2.pass"
                type="password"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item has-feedback name="checkPass" label="确认密码">
              <a-input
                v-model:value="formState2.checkPass"
                type="password"
                autocomplete="off"
              />
            </a-form-item>
            <a-form-item label="手机验证码" name="telcode">
              <a-input
                v-model:value="formState2.telcode"
                style="width: 50%"
                autocomplete="off"
              />
              <a-button style="margin-left: 10px" @click="gettellcode"
                >获取验证码</a-button
              >
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 6 }">
              <a-button type="primary" html-type="submit" @click="register2"
                >注册</a-button
              >
            </a-form-item>
          </a-form>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { get, del, post, tip, setLocalToken } from "@/common";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const formRef = ref();
    const formState = reactive({
      mail: "",
      pass: "",
      checkPass: "",
      mailcode: "",
    });
    const newuser = ref({
      mail: "",
      password: "",
      mailcode: "",
    });
    const newuser2 = ref({
      tel: "",
      password: "",
      telcode: "",
    });
    const formRef2 = ref();
    const formState2 = reactive({
      tel: "",
      pass: "",
      checkPass: "",
      telcode: "",
    });
    const register = () => {
      newuser.value.mail = formState.mail;
      newuser.value.password = formState.pass;
      newuser.value.mailcode = formState.mailcode;
      formRef.value.validate().then(() => {
        post("user/register/addUser", newuser.value).then((res) => {
          const token = res.data;
          setLocalToken(token);
          router.push({ path: "/user/home" });
        });
      });
    };
    const register2 = () => {
      newuser2.value.tel = formState2.tel;
      newuser2.value.password = formState2.pass;
      newuser2.value.telcode = formState2.telcode;
      formRef.value.validate().then(() => {
        post("user/register/addUser2", newuser2.value).then((res) => {
          const token = res.data;
          setLocalToken(token);
          router.push({ path: "/user/home" });
        });
      });
    };

    const getmailcode = () => {
      get("user/register/mailcode?mail=" + formState.mail).then((res) => {});
    };
    const gettelcode = () => {
      get("user/register/tellcode?tel=" + formState2.tel).then((res) => {});
    };

    let checkmail = async (_rule, value) => {
      let eReg = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/;
      if (value === "") {
        return Promise.reject("请输入邮箱");
      } else if (!eReg.test(value)) {
        return Promise.reject("请输入正确的邮箱格式!");
      } else {
        return Promise.resolve();
      }
    };

    let checktel = async (_rule, value) => {
      let eReg = /^[0-9]{11,11}$/;
      if (value === "") {
        return Promise.reject("请输入手机号");
      } else if (!eReg.test(value)) {
        return Promise.reject("请输入正确的手机号格式!");
      } else {
        return Promise.resolve();
      }
    };

    let validatePass = async (_rule, value) => {
      if (value === "") {
        return Promise.reject("请输入密码");
      } else if (value.length < 8) {
        return Promise.reject("密码位数应不少于8位");
      } else {
        return Promise.resolve();
      }
    };

    let validatePass2 = async (_rule, value) => {
      if (value === "") {
        return Promise.reject("请再次输入密码");
      } else if (value !== formState.pass) {
        return Promise.reject("两次输入密码不一致");
      } else {
        return Promise.resolve();
      }
    };

    let validatePass3 = async (_rule, value) => {
      if (value === "") {
        return Promise.reject("请输入验证码");
      } else {
        return Promise.resolve();
      }
    };

    const rules = {
      mail: [
        {
          required: true,
          validator: checkmail,
          trigger: "change",
        },
      ],
      pass: [
        {
          required: true,
          validator: validatePass,
          trigger: "change",
        },
      ],
      checkPass: [
        {
          validator: validatePass2,
          trigger: "change",
        },
      ],
      mailcode: [
        {
          required: true,
          validator: validatePass3,
          trigger: "change",
        },
      ],
    };
    const rules2 = {
      tel: [
        {
          required: true,
          validator: checktel,
          trigger: "change",
        },
      ],
      pass: [
        {
          required: true,
          validator: validatePass,
          trigger: "change",
        },
      ],
      checkPass: [
        {
          validator: validatePass2,
          trigger: "change",
        },
      ],
      telcode: [
        {
          required: true,
          validator: validatePass3,
          trigger: "change",
        },
      ],
    };
    const layout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 12,
      },
    };

    return {
      formState,
      formState2,
      formRef,
      formRef2,
      rules,
      rules2,
      layout,
      register,
      register2,
      newuser,
      newuser2,
      getmailcode,
      gettelcode,
      router,
      useRouter,
      activeKey: ref("1"),
    };
  },
});
</script>
<style>
.register-box {
  width: 40%;
  min-width: 500px;
  max-width: 500px;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 20px;
  height: 430px;
  background-color: #00000068;
}
.body {
  position: flex;
  top: 2cm;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-image: url("/public/ulogin-backimg.jpg");
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.form {
  padding: 50px 0 0 0;
}
.ant-form-item-label > label {
  color: #ffffff;
}
</style>